<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <title>尚硅谷会员注册页面</title>
    <link type="text/css" rel="stylesheet" href="../../static/css/style.css"/>
    <link rel="stylesheet" href="../../static/css/register.css"/>
    <style type="text/css">
        .login_form {
            height: 420px;
            margin-top: 25px;
        }
    </style>
</head>
<body>
<div id="app">
    <div id="login_header">
        <a href="../../index.html">
            <img class="logo_img" alt="" src="../../static/img/logo.gif"/>
        </a>
    </div>

    <div class="login_banner">
        <div class="register_form">
            <h1>注册尚硅谷会员</h1>
            <form action="regist_success.html">
                <div class="form-item">
                    <div>
                        <label>用户名称:</label>
                        <input type="text" placeholder="请输入用户名" v-model="username" @blur="checkUn()"/>
                    </div>
                    <span class="errMess" :class="{vv:isUn}">用户名应为6~16位数组和字母组成</span>
                </div>
                <div class="form-item">
                    <div>
                        <label>用户密码:</label>
                        <input type="password" placeholder="请输入密码" v-model="password" @blur="checkpwd()"/>
                    </div>
                    <span class="errMess" :class="{vv:isPwd}">密码的长度至少为8位</span>
                </div>
                <div class="form-item">
                    <div>
                        <label>确认密码:</label>
                        <input type="password" placeholder="请输入确认密码" v-model="repassword" @blur="checkReppwd()"/>
                    </div>
                    <span class="errMess" :class="{vv:isRePwd}">密码两次输入不一致</span>
                </div>
                <div class="form-item">
                    <div>
                        <label>用户邮箱:</label>
                        <input type="text" placeholder="请输入邮箱" v-model="email" @blur="checkEmail()"/>
                    </div>
                    <span class="errMess" :class="{vv:isEmail}"  >请输入正确的邮箱格式</span>
                </div>
                <div class="form-item">
                    <div>
                        <label>验证码:</label>
                        <div class="verify">
                            <input type="text" placeholder=""/>
                            <img src="../../static/img/code.bmp" alt=""/>
                        </div>
                    </div>
                    <span class="errMess">请输入正确的验证码</span>
                </div>
                <button class="btn" @click="checkLogin">注册</button>
            </form>
        </div>
    </div>
    <div id="bottom">
      <span>
        尚硅谷书城.Copyright &copy;2015
      </span>
    </div>
</div>
</body>
<script type="text/javascript" src="../../static/script/vue.min.js"></script>
<script type="text/javascript">
    new Vue({
        el: "#app",
        data: {
            "username": "",
            "password": "",
            "repassword": "",
            "email": "",
            "isUn": false,
            "isPwd": false,
            "isRePwd": false,
            "isEmail": false
        },
        methods: {
            checkUn() {
                this.isUn = false;
                var rep = /^\w{6,12}$/;
                if (rep.test(this.username) == false) {
                    this.isUn = true;
                    event.preventDefault();
                }
            },
            checkpwd() {
                this.isPwd = false;
                var rep = /^[a-zA-Z0-9]{6,}$/;
                if (rep.test(this.password) == false) {
                    this.isPwd = true;
                    event.preventDefault();
                }
            },
            checkReppwd() {
                this.isRePwd = false;
                if (this.repassword != this.password) {
                    this.isRePwd = true;
                    event.preventDefault();
                }
            },
            checkEmail() {
                this.isEmail = false;
                var rep =  /^\w+([\.\-]\w+)*\@\w+([\.\-]\w+)*\.\w+$/;
                if (rep.test(this.email) == false) {
                    this.isEmail = true;
                    event.preventDefault();
                }
            },
            checkLogin() {
                this.checkEmail();
                this.checkUn();
                this.checkpwd();
                this.checkReppwd()
            }
        }


    })
    ;
</script>
</html>
